<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./echarts.js"></script>
    <script src="./jquery-1.8.3.min.js"></script>
    <title>数据展示</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html {
            margin: 0;
            padding: 0;
            height: 100%;
            max-height: 100%;

        }

        body {
            margin: 0;
            /* padding: 20px 20px 30px;
            box-sizing: border-box; */
            height: 100%;
            min-width: 1200px;
        }

        .main {
            height: 100%;
            padding: 10px 20px;
            box-sizing: border-box;
            background-color: #2F4873;
            color: #fff;
        }

        .box-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;
        }

        .container {
            display: flex;
            width: 100%;
            min-width: 800px;
            max-height: 90%;
            min-height: 86%;
            /* height: 100%; */
        }

        .first-col {
            display: flex;
            flex-wrap: wrap;
            width: 36%;
            max-width: 40%;
            padding: 20px 0 10px;
            background-color: rgba(32, 86, 169, .38);
            border-radius: 10px;
            min-height: 90%;
            max-height: 92%;
            margin-top: 20px;
            min-width: 300px;
        }

        .first-top {
            display: flex;
            width: 100%;
            padding: 20px 40px;
            box-sizing: border-box;
            justify-content: space-around;
            padding-bottom: 10%;
            height: 40%;
        }

        .first-bottom {
            width: 100%;
            height: 50%;
        }

        .second-col {
            width: 36%;
            max-width: 36%;
            min-height: 90%;
            max-width: 92%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            margin-top: 20px;
            min-width: 300px;
        }

        .second-top {
            width: 100%;
            height: 40%;
            background-color: rgba(32, 86, 169, .38);
            border-radius: 10px;
        }

        .second-bottom {
            width: 100%;
            height: 56%;
            background-color: rgba(32, 86, 169, .38);
            border-radius: 10px;
            margin-top: 6%;
        }

        #compare {
            max-width: 100%;
            width: 90%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
        }

        .radius-pic {
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }

        .radius-border {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 1px solid rgb(0, 137, 255);
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            color: rgb(0, 137, 255);
            font-weight: 500;

        }

        .radius-text {
            text-align: center;
            padding-top: 10px;
            font-weight: 500;
        }

        .radius-box {
            width: 100%;
            display: flex;
            justify-content: space-around;
            padding: 20px 30px;
            box-sizing: border-box;
            /* height: 30%; */
            flex-wrap: wrap;
        }

        .radius {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            /* flex: 4; */
        }

        .radius:hover {
            transform: scale(1.2);
            /* transition-duration: 1000; */
        }

        .table-box {
            /* width: 60%; */
            height: 28%;
            display: flex;
            padding: 10px 0;
            justify-content: center;
        }

        #table {
            max-width: 100%;
            width: 90%;
            height: 100%;
        }

        .order-statistics {
            display: flex;
            width: 100%;
            height: 40%;
            padding: 10px 20px 0;
            justify-content: center;
            box-sizing: border-box;
            padding-bottom: 10%;
        }

        .order-left {
            width: 30%;
        }

        #loop {
            max-width: 100%;
            width: 90%;
        }

        .order-right {
            width: 100%;
            height: 100%;
        }

        #broken-line {
            width: 60%;
            height: 100%;
        }

        .title {
            padding: 10px 0;
        }

        .third-col {
            width: 24%;
            max-width: 24%;
            min-height: 90%;
            max-width: 92%;
            display: flex;
            padding: 10px 0;
            background-color: rgba(32, 86, 169, .38);
            flex-direction: column;
            margin-left: 20px;
            border-radius: 10px;
            margin-top: 20px;
            min-width: 150px;
        }

        .third-bottom {
            display: flex;
            height: 50%;
            padding: 20px 30px;
            box-sizing: border-box;
            justify-content: space-around;
        }

        #lastTable {
            max-width: 100%;
            width: 86%;
        }

        .title-pic {
            width: 100%;
            height: auto;
            min-width: 10%;
        }
    </style>
</head>

<body>

    <!-- 主要数据 -->
    <div class="main">
        <img class="title-pic" src="static/title.png" alt="">
        <!-- <h2 style="line-height: 1;margin:0;padding:0;text-align: center;">小正青年数据概览</h2> -->
        <!-- 用户分析 -->
        <!-- <div class="title">
            <img class="radius-pic" src="./static/radius.png" alt=""> 用户分析
        </div> -->
        <div class="container">


            <div class="first-col">
                <!-- 左边部分 -->
                <!-- <div class="radius-box"> -->
                <!-- 三个圆 -->
                <!-- <div class="radius"> -->
                <!-- 圆 -->
                <!-- <div class="radius-border">
                        120
                    </div>
                    <div class="radius-text">
                        用户总数
                    </div>
                </div> -->
                <div class="first-top">
                    <div class="radius">
                        <!-- 圆 -->
                        <div class="radius-border">
                            120
                        </div>
                        <div class="radius-text">
                            总订单数
                        </div>
                    </div>
                    <div class="radius">
                        <!-- 圆 -->
                        <div class="radius-border">
                            12 W
                        </div>
                        <div class="radius-text">
                            一周订单数
                        </div>
                    </div>
                    <div class="radius">
                        <!-- 圆 -->
                        <div class="radius-border">
                            12 W
                        </div>
                        <div class="radius-text">
                            今日订单数
                        </div>
                    </div>
                </div>
                <div class="first-bottom">
                    <div class="order-right">
                        <!-- <div id="broken-line"> -->
                        <div id="lastTable" style="height: 100%"></div>
                    </div>
                </div>
                <!-- 先注释 -->
                <!-- <div class="radius"> -->
                <!-- 圆 -->
                <!-- <div class="radius-border">
                        12 W
                    </div>
                    <div class="radius-text">
                        完成支付订单数
                    </div>
                </div>
                <div class="radius"> -->
                <!-- 圆 -->
                <!-- <div class="radius-border">
                        12 W
                    </div>
                    <div class="radius-text">
                        未接过单用户
                    </div>
                </div>
                <div class="radius"> -->
                <!-- 圆 -->
                <!-- <div class="radius-border">
                        12 W
                    </div>
                    <div class="radius-text">
                        订单好评率
                    </div>
                </div> -->
                <!-- 先注释完成 -->
            </div>
            <!-- 右边部分 -->


            <!-- 订单统计 -->
            <!-- <div class="title">
            <img class="radius-pic" src="./static/radius.png" alt=""> 订单统计
        </div> -->
            <div class="second-col">
                <!-- <div class="table-box">
                <div id="table" style="height: 100%"></div>
            </div> -->
                <div class="second-top">
                    <!-- 未接单人数与接单人数比较 -->
                    <div id="compare">
                    </div>
                </div>
                <div class="second-bottom">
                    <div id="table"></div>
                </div>
            </div>
            <div class="third-col">
                <div class="order-statistics">
                    <!-- 左边部分 -->
                    <!-- <div class="order-left"> -->
                    <div id="loop" style="height: 100%">
                        <!-- </div> -->
                    </div>
                    <!-- <div class="order-right"> -->
                    <!-- <div id="broken-line"> -->
                    <!-- <div id="lastTable" style="height: 100%"></div> -->
                    <!-- </div> -->
                </div>
                <div class="third-bottom">
                    <div class="radius">
                        <!-- 圆 -->
                        <div class="radius-border">
                            12 W
                        </div>
                        <div class="radius-text">
                            完成支付订单数
                        </div>
                    </div>
                    <div class="radius">
                        <!-- 圆 -->
                        <div class="radius-border">
                            12 W
                        </div>
                        <div class="radius-text">
                            订单好评率
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 近7日成交额 -->
    <!-- <div class="third-col"> -->
    <!-- <div class="table-box"> -->

    <!-- </div> -->
    <!-- </div> -->
    </div>

</body>
<script>
    var totalPeopleNums = 0;
    var compare = document.getElementById("compare");
    var compareChart = echarts.init(compare);
    var option = {};
    $.ajax({
        url: "https://www.xiaozheng8.com/index/xzqn/totalUser",
        type: "POST",
        contentType: "application/json;charset=UTF-8",
        success: function (result) {
            console.log(result);
            totalPeopleNums = result.data.totalPeopleNums;
            // document.getElementsByClassName("radius-border")[0].innerHTML = result.data.totalPeopleNums;
            // document.getElementsByClassName("radius-border")[1].innerHTML = result.data.weekPeopleNums;
            // document.getElementsByClassName("radius-border")[2].innerHTML = result.data.totalPeopleNums;
            $.ajax({
                url: "https://www.xiaozheng8.com/index/xzqn/totalOrder",
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                success: function (result) {
                    console.log(result);
                    var unReceiveUser = result.data.unReceiveUser
                    $(".radius-border")[0].innerHTML = result.data.totalOrderNums;
                    $(".radius-border")[1].innerHTML = result.data.weekOrderNums;
                    $(".radius-border")[2].innerHTML = result.data.todayOrderNums;

                    option = {
                        title: {
                            text: '接单方发单方比较',
                            x: 'center',
                            y: 'top',
                            textStyle: {
                                color: '#fff'
                            }
                            // subtext: '数据来自网络'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        // legend: {
                        //     data: ['2011年', '2012年']
                        // },
                        grid: {
                            left: '3%',
                            right: '10%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01],
                            splitLine: { //网格线
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#fff', //左边线的颜色
                                    width: '2' //坐标线的宽度
                                }

                            }
                        },
                        yAxis: {
                            type: 'category',
                            data: ['未接单人数', '用户总量'],
                           
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff', //更改坐标轴文字颜色 
                                },
                                lineStyle: {
                                    color: '#fff',
                                    width: 1, //这里是为了突出显示加上的
                                },

                            },
                        },
                        series: [{
                                name: '总量',
                                type: 'bar',
                                data: [unReceiveUser, totalPeopleNums],
                                barWidth: 30,
                                color: function (params) {

                                    // build a color map as your need.

                                    var colorList = [

                                        'rgba(1, 135, 246, 1)',
                                        'rgba(28, 71, 209, 1)',


                                    ];

                                    return colorList[params.dataIndex]

                                },
                            },


                        ]
                    }
                    if (option && typeof option === "object") {
                        compareChart.setOption(option, true);
                    }
                    $(".radius-border")[3].innerHTML = result.data.FinishPayOrderNums;
                    // $(".radius-border")[5].innerHTML = result.data.unReceiveUser;
                    $(".radius-border")[4].innerHTML = result.data.orderLikeNums;

                    // document.getElementsByClassName("radius-border")[1].innerHTML = result.data.weekPeopleNums;
                    // document.getElementsByClassName("radius-border")[2].innerHTML = result.data.totalPeopleNums;

                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        },
        //请求失败，包含具体的错误信息
        error: function (e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });
    // console.log(totalPeopleNums);

    // var table = document.getElementById("table");
    // var tableChart = echarts.init(table);
    // var app = {};
    // option = null;
    // app.title = '坐标轴刻度与标签对齐';
    // // document.ready = function () {
    //     $.ajax({
    //         url: "https://www.xiaozheng8.com/index/xzqn/userCity",
    //         type: "POST",
    //         contentType: "application/json;charset=UTF-8",
    //         success: function (result) {
    //             console.log(result);
    //             var area = result.data.citys;
    //             var person = result.data.userNums;
    //             option = {
    //                 title: {
    //                     text: '用户地区分布',

    //                     x: 'center',
    //                     y: 'bottom',
    //                     textStyle: {
    //                         fontSize: 14,
    //                         color: '#000'
    //                     }
    //                 },

    //                 tooltip: {
    //                     trigger: 'axis',
    //                     axisPointer: { // 坐标轴指示器，坐标轴触发有效
    //                         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    //                     }
    //                 },
    //                 grid: {
    //                     left: '3%',
    //                     right: '10%',
    //                     top: "12%",
    //                     bottom: '18%',
    //                     containLabel: true
    //                 },
    //                 xAxis: [{
    //                     type: 'category',
    //                     // data: ['其他', '西藏', '广州', '南昌', '杭州', '上海', '北京'],
    //                     data: area,
    //                     axisTick: {
    //                         alignWithLabel: true
    //                     },
    //                     name: "城市名"
    //                 }],
    //                 yAxis: [{
    //                     type: 'value'
    //                 }],
    //                 series: [{
    //                     name: '当前数值',
    //                     type: 'bar',
    //                     barWidth: '80%',
    //                     // data: [10, 52, 200, 334, 390, 330, 220],
    //                     data: person,
    //                     name: "人",
    //                     itemStyle: {

    //                         //通常情况下：
    //                         normal: {
    //                             label: {
    //                                 show: true
    //                             },
    //                             //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
    //                             color: function (params) {
    //                                 var colorList = ['#ffb85c', "#da426c", "#e958ef",
    //                                     "#6a54f7",
    //                                     "#78f87c",
    //                                     "#52ebd2", "#ff5c5c"
    //                                 ];
    //                                 return colorList[params.dataIndex];
    //                             }
    //                         },

    //                     }
    //                 }]

    //             };
    //             // if (option && typeof option === "object") {
    //                 tableChart.setOption(option, true);
    //             // }
    //         },
    //         error() {

    //         },
    //     })
    // }
</script>
<script>
    var loop = document.getElementById("loop");
    var loopChart = echarts.init(loop);
    var app = {};
    option = null;

    app.title = '环形图';
    $.ajax({
        url: "https://www.xiaozheng8.com/index/xzqn/authAndSend",
        type: "POST",
        contentType: "application/json;charset=UTF-8",
        success: function (result) {
            console.log(result)
            var totalOrder = result.data.authNums;
            var weekOrder = result.data.sendNums;
            var totalScale = totalOrder / (totalOrder + weekOrder) * 100;
            console.log(totalScale);
            var total = 0;
            total = totalScale.toFixed(2);
            console.log(total);
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    itemWidth: 10,
                    itemHeight: 10,
                    // borderRadius:"50%",
                    orient: 'horizontal',
                    icon: "circle",
                    x: 'center',
                    y: 'bottom',
                    padding: 0,
                    itemGap: 50,
                    selectedMode: false,
                    textStyle: { //图例文字的样式
                        color: '#fff',
                    },
                    data: ['接单方', '发单方']
                },
                graphic: [{ //环形图中间添加文字
                    type: 'text', //通过不同top值可以设置上下显示
                    left: 'center',
                    top: '45%',
                    // formatter:'{d}%',
                    style: {
                        text: total + '%',
                        textAlign: 'center',
                        fill: 'rgb(4,15,255)', //文字的颜色
                        width: 30,
                        height: 30,
                        fontSize: 20,
                        fontFamily: "Microsoft YaHei"
                    }
                }],

                series: [{
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{
                            value: weekOrder,
                            name: '接单方'
                        },
                        {
                            value: totalOrder,
                            name: '发单方'
                        }

                    ],
                    color: ["rgb(255,199,92)", "rgb(4,15,255)"]
                }]

            };
            if (option && typeof option === "object") {
                loopChart.setOption(option, true);
            }
        },
        error(err) {
            console.log(err)
        }
    });
</script>
<script>
    var table = document.getElementById("table");
    var chart = echarts.init(table);
    var app = {};
    option = null;
    app.title = '折线图';
    var count = [];
    var date = [];
    table.style.display = "block";
    // document.onload=function(){
    $.ajax({
        url: "https://www.xiaozheng8.com/index/xzqn/monthMoneyChart",
        type: "POST",
        contentType: "application/json;charset=UTF-8",
        success: function (result) {
            console.log(result);
            count = result.data.money;
            date = result.data.month;
            var newDate = [];
            // for (var i = 0; i < date.length; i++) {
            //     newDate.push(date[i].substring(5));
            // }
            option = {
                title: {
                    text: '6月内月交易金额',
                    x: 'center',
                    y: 'bottom',
                    top: 10,
                    textStyle: {
                        fontSize: 14,
                        color: '#fff'
                    }
                },

                grid: {
                    left: '3%',
                    right: '10%',
                    top: "12%",
                    bottom: '18%',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    // data: ['9/1', '9/2', '9/3', '9/4', '9/5', '9/6', '9/7'],
                    data: date,
                    name: "日期",
                    axisLine: {
                        lineStyle: {
                            color: '#0087ED',
                            width: 1, //这里是为了突出显示加上的
                        }
                    }

                },
                yAxis: {
                    type: 'value',
                    data: count,
                    axisLine: {
                        lineStyle: {
                            color: '#0087ED',
                            width: 1, //这里是为了突出显示加上的
                        },
                        textStyle: {
                            color: '#fff', //更改坐标轴文字颜色

                        }
                    },
                    // y轴标齐线
                    splitLine: {
                        show: false,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['#0087ED']
                        }
                    }


                },

                series: [{
                    data: count,
                    type: 'line',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#ffb85c', "#da426c", "#e958ef",
                                    "#6a54f7",
                                    "#78f87c",
                                    "#52ebd2", "#ff5c5c"
                                ];
                                return colorList[params.dataIndex];
                            },
                            label: {
                                show: true
                            }
                        }
                    }
                }],

            }
            console.log(option);
            // if (option && typeof option === "object") {
            chart.setOption(option, true);
            // }
        },
        error(err) {
            console.log(err)
        }
    })
    // }
</script>
<script>
    var dom = document.getElementById("lastTable");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    app.title = '坐标轴刻度与标签对齐';
    document.ready = function () {
        $.ajax({
            url: "https://www.xiaozheng8.com/index/xzqn/monthChart",
            type: "POST",
            contentType: "application/json;charset=UTF-8",
            success: function (result) {
                console.log(result);
                count = result.data.count;
                date = result.data.month;
                console.log(date);
                console.log(count);
                // var newDate = [];
                // for (var i = 0; i < date.length; i++) {
                //     newDate.push(date[i].substring(5));
                // }

                option = {
                    grid: {
                        left: '5%',
                        right: '2%',
                        top: "10%",
                        bottom: '18%',
                        containLabel: true
                    },
                    title: {
                        text: '前6月订单数',

                        x: 'center',
                        y: 'bottom',
                        textStyle: {
                            fontSize: 14,
                            color: '#fff'
                        }
                    },

                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '10%',
                        top: "10%",
                        bottom: '18%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: date,
                        axisTick: {
                            alignWithLabel: true
                        },
                        name: "日期",
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1, //这里是为了突出显示加上的
                            }
                        }
                    }],
                    legend: {
                        x: 'center',
                        y: 'bottom',
                        data: date
                    },
                    yAxis: [{
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#fff',
                                    width: 1, //这里是为了突出显示加上的
                                }
                            },
                            // y轴标齐线
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: ['#fff']
                                }
                            }
                        },


                    ],
                    series: [{
                        name: '当前数值',
                        type: 'bar',
                        barWidth: '60%',
                        data: count,
                        name: "单",
                        itemStyle: {

                            //通常情况下：
                            normal: {
                                label: {
                                    show: true
                                },
                                lineStyle: {
                                    color: "#fff"
                                },
                                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                color: function (params) {
                                    var colorList = ['#ffb85c', "#da426c", "#e958ef",
                                        "#6a54f7",
                                        "#78f87c",
                                        "#52ebd2", "#ff5c5c"
                                    ];
                                    return colorList[params.dataIndex];
                                }
                            },

                        }
                    }]

                };;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            error(err) {
                console.log(err)
            }
        })
    }
</script>

</html>